<!--  -->
<template>
  <div  class="min">
    <div class="navs">
      <ul class="tiles">
        <li>项目进度趋势图</li>
        <li>单位：个</li>
        <li class="el-icon-setting"></li>
      </ul>
    </div>
    <div style="width:100%;height:254px" ></div>
  </div>
</template>
<script>
// import  echarts from 'echarts';
export default {
  name: 'Echas',
  components: {
    // echarts
  },
  data() {
    return {}
  },
  created() {},
  mounted() {
    // this.echs()
  },
  methods: {
    // echs() {
    //    const chart = this.$refs.chart
    //   if (chart) {
    //     const myChart = this.$echarts.init(chart)
    //     const option = {
    //       title: {
    //         text: 'Stacked Area Chart',
    //       },
    //       tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //           type: 'cross',
    //           label: {
    //             backgroundColor: '#6a7985',
    //           },
    //         },
    //       },
    //       legend: {
    //         data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    //       },
    //       toolbox: {
    //         feature: {
    //           saveAsImage: {},
    //         },
    //       },
    //       grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         containLabel: true,
    //       },
    //       xAxis: [
    //         {
    //           type: 'category',
    //           boundaryGap: false,
    //           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //         },
    //       ],
    //       yAxis: [
    //         {
    //           type: 'value',
    //         },
    //       ],
    //       series: [
    //         {
    //           name: 'Email',
    //           type: 'line',
    //           stack: 'Total',
    //           areaStyle: {},
    //           emphasis: {
    //             focus: 'series',
    //           },
    //           data: [120, 132, 101, 134, 90, 230, 210],
    //         },
    //         {
    //           name: 'Union Ads',
    //           type: 'line',
    //           stack: 'Total',
    //           areaStyle: {},
    //           emphasis: {
    //             focus: 'series',
    //           },
    //           data: [220, 182, 191, 234, 290, 330, 310],
    //         },
    //         {
    //           name: 'Video Ads',
    //           type: 'line',
    //           stack: 'Total',
    //           areaStyle: {},
    //           emphasis: {
    //             focus: 'series',
    //           },
    //           data: [150, 232, 201, 154, 190, 330, 410],
    //         },
    //         {
    //           name: 'Direct',
    //           type: 'line',
    //           stack: 'Total',
    //           areaStyle: {},
    //           emphasis: {
    //             focus: 'series',
    //           },
    //           data: [320, 332, 301, 334, 390, 330, 320],
    //         },
    //         {
    //           name: 'Search Engine',
    //           type: 'line',
    //           stack: 'Total',
    //           label: {
    //             show: true,
    //             position: 'top',
    //           },
    //           areaStyle: {},
    //           emphasis: {
    //             focus: 'series',
    //           },
    //           data: [820, 932, 901, 934, 1290, 1330, 1320],
    //         },
    //       ],
    //     }
    //     myChart.setOption(option)
    //     window.addEventListener('resize', function () {
    //       myChart.resize()
    //     })
    //   }
    //   this.$on('hook:destroyed', () => {
    //     window.removeEventListener('resize', function () {
    //       myChart.resize()
    //     })
    //   })
    // },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.min {
  width: 100%;
  height: 254px;
  .navs {
    margin: 0 auto;
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #e9e9e9;
    .tiles {
      width: 90%;
       height: 56px;
      list-style: none;
      display: flex;
      flex-grow: 1;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;
      li{
        
      }
      li:nth-child(1) {
        width: 112px;
       
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
      }
      li:nth-child(2) {
        height: 24px;
        opacity: 0.5;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        line-height: 24px;
      
        text-align: center;
      }
      li:nth-child(3) {
        height: 17px;
        margin-left: 65px;
        line-height: 16px;
       
      }
    }
  }
}
</style>
